<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Button Open DeepLink Example</title>
	<script>

		function openDeepLink() {
			var link = document.getElementById('hiddenLink');
			var userAgent = navigator.userAgent || navigator.vendor || window.opera;
			// 判断苹果iOS
			if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
				// link.href = 'itms-services://?action=download-manifest&url=https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/downloa/mmcpmis-httpszs-cs.plist'
				// link.click(); // 触发链接点击
				window.location.href = 'itms-services://?action=download-manifest&url=https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/mmcpmis-httpszs-cs.plist'
				return
			}

			alert(userAgent)
			// 判断华为鸿蒙HarmonyOS
			if (/Harmony|Huawei|OpenHarmony/.test(userAgent)) {
				let url = 'store://enterprise/manifest?url=https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/cpmis.json5'
				window.open(url, '_parent')
				return
			}

			// 判断安卓Android
			if (/Android/.test(userAgent)) {
				link.href = 'https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/mmcpmis.apk'
				link.click(); // 触发链接点击
				return
			}
			

		}

	</script>
</head>

<body style="padding: 1rem;">
	<div class="headContent">
		<img class="iconImage" src="https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/icons.png" alt="">
		<div class="content">
			<div class="title">智慧建设</div>
			<button id="myButton" onclick="openDeepLink()" class="downloadBtn">获取</button>
			<a id="hiddenLink" href="javascript:void 0" style="display:none;"></a>
		</div>
	</div>
	<hr />
	<div style="height: 120px;">
		智慧建设介绍
	</div>
	<div style="display: flex; overflow-x:auto; justify-content: space-between; gap: 20px;">
		<img class="showImage" src="https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/show1.jpg">
		<img class="showImage" src="https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/show2.png">
		<img class="showImage" src="https://mmapp-ctest.chinatelecom.com.cn/mmcpmis-api/download/show3.png">
	</div>


</body>

</html>
<style>
	.headContent {
		height: 10rem;
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}

	.iconImage {
		width: 10rem;
		height: 10rem;
		border-radius: 3rem;
		border: 1px solid #f7f7f7;
	}

	.title {
		font-size: 3rem;
		font-weight: bolder;
		height: 4rem;
	}

	.content {
		padding: 1rem;
	}

	.downloadBtn {
		background-color: #067CFF;
		border: none;
		border-radius: 3rem;
		width: 8rem;
		height: 3rem;
		color: white;
		margin-top: 3rem;
		font-size: 1.5rem;
	}

	.showImage {
		width: 55%;
		border: #f7f7f7 1px solid;
		border-radius: 3rem;
	}
</style>